<template>
  <div>
    <el-table
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
      class="material-apply-table"
      border
      :data="disposeFormListViewTime(data, columns)">
      <el-table-column
        v-for="column in columns"
        :key="column.fieldId"
        :label="column.displayName"
        :prop="column.fieldName"
        :show-overflow-tooltip="isOpenData ? column.fieldName != 'propserName' : true"
        :width="column.minWidth || '100px'">
        <template slot-scope="scope">

          <!-- start 出库id -->
          <template v-if="column.fieldName === 'bizId'">
            <template v-if="isLookRepertoryRecordInfo">
              <a
                href=""
                class="view-detail-btn task-list-numbering"
                @click.stop.prevent="
                  openOutTab(scope.row.id, scope.row[column.fieldName])
                "
              >
                {{ scope.row[column.fieldName] }}
              </a>
            </template>
            <template v-else>
              {{ scope.row[column.fieldName]}}
            </template>
          </template>
          <!-- end 出库id -->

          <!-- start 缺货id -->
          <template v-else-if="column.fieldName === 'documentsId'">
            <template v-if="isLookRepertoryRecordInfo">
              <a
                href=""
                class="view-detail-btn task-list-numbering"
                @click.stop.prevent="
                  openBackTab(scope.row.id, scope.row[column.fieldName])
                "
              >
                {{ scope.row[column.fieldName] }}
              </a>
            </template>
            <template v-else>
              {{ scope.row[column.fieldName]}}
            </template>
          </template>
          <!-- end 缺货id -->

          <!-- start 单据id -->
          <template v-else-if="column.fieldName === 'paasApproveNo'">
            <template v-if="isLookRepertoryRecordInfo">
              <a
                href=""
                class="view-detail-btn task-list-numbering"
                @click.stop.prevent="
                  openApproveTab(scope.row, column.fieldName)
                "
              >
                {{ scope.row[column.fieldName] }}
              </a>
            </template>
            <template v-else>
              {{ scope.row[column.fieldName]}}
            </template>
          </template>
          <!-- end 单据id -->

          <!-- start 物流编号 -->
          <template v-else-if="column.fieldName === 'logisticsNo'">
            <material-logistics-dialog 
              ref="materialLogisticsDialog" 
              :value="scope.row[column.fieldName]"
              :data="logisticsData"
              @getMessage="getLogisticsMessage"
            />
            
          </template>
          <!-- end 物流编号 -->

          <!-- start 出库/缺货状态 -->
          <template v-else-if="column.fieldName === 'stateDict'">
            {{getStateLabel(scope.row[column.fieldName])}}
          </template>
          <!-- end 出库/缺货状态 -->

          <!-- start 物料去向 -->
          <template v-else-if="column.fieldName === 'typeName'">
            {{getMaterialDestinationLabel(scope.row[column.fieldName])}}
          </template>
          <!-- end 物料去向 -->
          
          <!-- start 创建人 -->
          <template v-else-if="column.fieldName === 'createUserName'">
            <template v-if="isOpenData && scope.row && scope.row.createUserStaffId">
              <open-data type="userName" :openid="scope.row.createUserStaffId"></open-data>
            </template>
            <template v-else>
              {{ scope.row[column.fieldName] }}
            </template>
          </template>
          <!-- end 创建人 -->

          <!-- start 申请时间 -->
          <template v-else-if="column.fieldName === 'createTime'">
            {{ scope.row[column.fieldName] | fmt_date }}
          </template>
          <!-- end 申请时间 -->

          <!-- start 当前库存是否满足 -->
          <template v-else-if="column.fieldName === 'flag'">
            <span v-if="scope.row[column.fieldName]">{{$t('common.base.yes')}}</span>
            <span v-else>{{$t('common.base.no')}}</span>
          </template>
          <!-- end 当前库存是否满足 -->

          <template v-else>
            {{ $formatFormField(column, scope.row) }}
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform'
/* components */
import MaterialLogisticsDialog from './MaterialLogisticsDialog';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { MaterialOutStockStateLabelEnum, MaterialDestinationLabelEnum, MaterialLackStockStateLabelEnum } from '@model/enum/LabelEnum'
import { useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()

export default {
  name: 'material-apply-records',
  props: {
    type: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => ([])
    },
    columns: {
      type: Array,
      default: () => ([])
    },
    logisticsData: {
      type: Object,
      default: () => ({})
    },
    isLookRepertoryRecordInfo: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isOpenData
    }
  },
  methods: {
    disposeFormListViewTime,
    // 获取物料出库状态的多语言label
    getMaterialOutStockStateLabel(state) {
      return MaterialOutStockStateLabelEnum[state] || state
    },
    // 获取物料去向的多语言label
    getMaterialDestinationLabel(name) {
      return MaterialDestinationLabelEnum[name] || name
    },
    // 获取物料缺货状态的多语言label
    getmaterialLackStockStateLabelLabel(state) {
      return MaterialLackStockStateLabelEnum[state] || state
    },
    getStateLabel(state) {
      if (this.type == 'out') return this.getMaterialOutStockStateLabel(state)
      if (this.type == 'lack') return this.getmaterialLackStockStateLabelLabel(state)
      return state
    },
    getLogisticsMessage(value) {
      this.$emit('getLogisticsMessage', value)
    },
    openOutTab(warehouseId, warehouseNo) {
      if (!warehouseId) return;

      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageLeavestockDetail,
        key: warehouseNo,
        titleKey: warehouseNo,
        params: `id=${warehouseId}`,
        fromId
      })
    },
    openBackTab(warehouseId, warehouseNo) {
      if (!warehouseId) return;

      let fromId = window.frameElement.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageStockoutDetail,
        key: warehouseNo,
        titleKey: `${this.$t('task.detail.components.lackStock')}${warehouseNo}`,
        params: `id=${warehouseId}`,
        fromId
      })
    },

    // 物料审批跳转 
    openApproveTab(row, fieldName) {
      if (!row.processId) return;
      const warehouseNo = row[fieldName]
      const fromId = window.frameElement.getAttribute('id');     
      openAccurateTab({
        type: PageRoutesTypeEnum.PagePaasTemplateDetail,
        key: row.processId,
        titleKey: `${this.$t('task.detail.components.materialQualityHandleList')}${warehouseNo}`,
        params: `formId=${row.formId}&formContentId=${row.formContentId}&processId=${row.processId}`,
        fromId
      })
    }, 
  },
  components: {
    [MaterialLogisticsDialog.name]: MaterialLogisticsDialog
  }
}
</script>

<style lang="scss">
.material-apply-table {
  background: $bg-color-l1;

  &::before {
    height: 0;
  }

  .base-table-header-v3 th {
    background: none;
    color: #8593A6;
    border-bottom: none;
    font-size: $font-size-small;
  }

  tr {
    background: none !important;

    &:hover td {
      background: none !important;
    }
  }

  td {
    border-bottom: none !important;
  }

  .view-detail-btn {
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
</style>
